<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>苏玉环的h5页面</title>
<meta name="viewport" content="width=640,user-scalable=no,target-densityDpi=device-dpi">
<style>
*{ margin:0; padding:0;}
html{ overflow:hidden;}
body{font-family:Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC",sans-self;}
li{ list-style:none;}
img{ display:block;}
#c1{ position:absolute; left:0; top:0; z-index:20;}
#main{ width:640px; height:auto; position:relative; left:0; top:0;}
#list{ width:100%; height:100%; -webkit-perspective:800; perspective:800;}
#list > li{ width:100%; height:100%; position:absolute; left:0; top:0; z-index:10; display:none; -webkit-transform-origin:bottom;}
#list > li:nth-of-type(1){ display:block;}
#list > li img:nth-of-type(3){ position:absolute; opacity:0;}
#list > li img:nth-of-type(3).active{ -webkit-animation:2s infinite title; animation:2s infinite title;}
#list > li:nth-of-type(1) img:nth-of-type(3){ left:90px; top:530px;}
#list > li:nth-of-type(2) img:nth-of-type(3){ left:153px; top:495px;}
#list > li:nth-of-type(3) img:nth-of-type(3){ left:223px; top:709px;}
#list > li:nth-of-type(4) img:nth-of-type(3){ left:153px; top:523px;}
#list > li:nth-of-type(5) img:nth-of-type(3){ left:195px; top:733px;}
#list > li:nth-of-type(6) img:nth-of-type(3){ left:49px; top:523px;}
#list > li:nth-of-type(7) img:nth-of-type(3){ left:237px; top:530px;}
#list > li:nth-of-type(8) img:nth-of-type(3){ left:231px; top:523px;}
@-webkit-keyframes title{
	0%{ -webkit-transform:scale(1); opacity:0;}
	50%{ -webkit-transform:scale(1); opacity:0.5;}
	100%{ -webkit-transform:scale(1.2); opacity:0;}
}
@keyframes title{
	0%{ transform:scale(1); opacity:0;}
	50%{ transform:scale(1); opacity:0.5;}
	100%{ transform:scale(1.2); opacity:0;}
}

#beginEffect{ width:100%; height:100%; position:absolute; left:0; top:0; z-index:30;}
#sun{ width:100px; height:100px; background:url(img/sun.png) no-repeat; position:absolute; left:50%; margin-left:-50px; top:20%; background-size:cover; -webkit-animation:1s infinite flash linear; animation:1s infinite flash linear;}
@-webkit-keyframes flash{
	0%{ opacity:0.5;}
	50%{ opacity:1; }
	100%{ opacity:0.5; }
}
@keyframes flash{
	0%{ opacity:0.5;}
	50%{ opacity:1; }
	100%{ opacity:0.5; }
}
#text1{ width:348px; height:200px; background:url(img/t1.png) no-repeat; position:absolute; left:50%; margin-left:-174px; top:40%;}
#text2{ width:418px; height:390px; background:url(img/t2.png) no-repeat; position:absolute; left:50%; margin-left:-209px; top:40%; opacity:0;}
#beginEffect .lx img{ position:absolute; -webkit-transform-origin:left;}
#beginEffect .lx img:nth-of-type(1){ left:500px; top:400px; height:20px; -webkit-animation:4s -3s infinite liuxing linear; animation:3s infinite liuxing linear;}
#beginEffect .lx img:nth-of-type(2){ left:300px; top:200px; height:10px; -webkit-animation:5s infinite liuxing linear; animation:5s infinite liuxing linear;}
#beginEffect .lx img:nth-of-type(3){ left:400px; top:300px; height:5px; -webkit-animation:2s -2s infinite liuxing linear; animation:2s infinite liuxing linear;}
#beginEffect .lx img:nth-of-type(4){ left:500px; top:600px; height:15px; -webkit-animation:7s -1s infinite liuxing linear; animation:7s infinite liuxing linear;}
@-webkit-keyframes liuxing{
	0%{ -webkit-transform:rotate(-45deg) translate(0,0) scaleX(0.5); opacity:0; }
	40%{ -webkit-transform:rotate(-45deg) translate(-200px,0) scaleX(1); opacity:1;}
	100%{ -webkit-transform:rotate(-45deg) translate(-500px,0) scaleX(0) }
}
@keyframes liuxing{
	0%{ transform:rotate(-45deg) translate(0,0) scaleX(0.5); opacity:0; }
	40%{ transform:rotate(-45deg) translate(-200px,0) scaleX(1); opacity:1;}
	100%{ transform:rotate(-45deg) translate(-500px,0) scaleX(0) }
}
#arrow{ width:100px; height:auto; position:absolute; left:50%; margin-left:-50px; bottom:10px; z-index:7;}
#arrow div{ width:28px; height:16px; background:url(img/arr.png) no-repeat; margin:0 auto; -webkit-animation:1s infinite arrowTop; animation:1s infinite arrowTop;}
#arrow span{ font-size:26px; text-align:center; width:100%; color:#666; display:block;}
@-webkit-keyframes arrowTop{
	0%{ -webkit-transform:translate(0,0); opacity:0;}
	60%{ -webkit-transform:translate(0,-20px); opacity:1;}
	100%{ -webkit-transform:translate(0,-30px); opacity:0;}
}
@keyframes arrowTop{
	0%{ transform:translate(0,0); opacity:0;}
	60%{ transform:translate(0,-20px); opacity:1;}
	100%{ transform:translate(0,-30px); opacity:0;}
}

#music{ width:14px; height:14px; background:url(img/musicoff.gif) no-repeat; position:absolute; right:20px; bottom:20px; z-index:7; -webkit-transform:scale(2); transform:scale(2);}
#music.active{ background:url(img/musicon.gif) no-repeat;}
#loading{ width:100%; height:100%; background:black; position:absolute; left:0; top:0; z-index:40;}
#loading .content1 , #loading .content2{ width:40px; height:40px; position:absolute; left:50%; top:40%; margin-left:-20px;}
#loading .content1 div , #loading .content2 div{ width:12px; height:12px; position:absolute; border-radius:50%; background:white; -webkit-animation:1.5s infinite loadingRun; animation:1.5s infinite loadingRun;}
#loading .content2{ -webkit-transform:rotate(45deg); transform:rotate(45deg);}
.arc1{ left:0; top:0;}
.arc2{ right:0; top:0;}
.arc3{ right:0; bottom:0;}
.arc4{ left:0; bottom:0;}
@-webkit-keyframes loadingRun{
	0%{ -webkit-transform:scale(1);}
	50%{ -webkit-transform:scale(0);}
	100%{ -webkit-transform:scale(1);}
}
@keyframes loadingRun{
	0%{ transform:scale(1);}
	50%{ transform:scale(0);}
	100%{ transform:scale(1);}
}
#loading .content1 .arc1{ -webkit-animation-delay:-0.1s;}
#loading .content2 .arc1{ -webkit-animation-delay:-0.3s;}
#loading .content1 .arc2{ -webkit-animation-delay:-0.5s;}
#loading .content2 .arc2{ -webkit-animation-delay:-0.7s;}
#loading .content1 .arc3{ -webkit-animation-delay:-0.9s;}
#loading .content2 .arc3{ -webkit-animation-delay:-1.1s;}
#loading .content1 .arc4{ -webkit-animation-delay:-1.3s;}
#loading .content2 .arc4{ -webkit-animation-delay:-1.5s;}
#loading span{ font-size:30px; color:white; width:100%; text-align:center; position:absolute; top:50%;}
</style>
<script src="jquery-2.1.3.min.js"></script>
<script>

$(document).on('touchmove',function(ev){
	ev.preventDefault();
});

$(function(){
	
	var $main = $('#main');
	var $list = $('#list');
	var $li = $list.find('>li');
	var viewHeight = $(window).height();
	
	$main.css('height',viewHeight);
	
	showLoading();
	slideCanvas();
	slideImg();
	
	function slideCanvas(){
		var $c = $('#c1');
		var gc = $c.get(0).getContext('2d');
		var timer = null;
		$c.attr('height',viewHeight);
		var iNow = 0;
		var img = new Image();
		img.src = 'img/a.jpg';
		var moveImg = new Image();
		moveImg.src = 'img/Touch4.png';
		
		moveImg.onload = function(){
			
			gc.drawImage( img , (640 - nowViewWidth())/2 , 0 , nowViewWidth() , viewHeight );
			gc.globalCompositeOperation = 'destination-out';
			
			$c.on('touchstart',function(){
				
				//gc.drawImage( moveImg ,0,400,254,400, 0 , 0 , 640 , viewHeight );
			
				timer = setInterval(function(){
					
					//i -> 0 1 2 3  0 1 2 3  ....
					//j ->  0 0 0 0 1 1 1 1 2 2 2 2 ...
					
					var i = iNow%4;
					var j = Math.floor(iNow/4);
					
					gc.drawImage( moveImg ,i*254,j*400,254,400, 0 , 0 , 640 , viewHeight );
					
					iNow++;
					
					if(iNow == 19){
						clearInterval(timer);
						$c.remove();
						cjAnimate.inAn(0);
					}
					
				},100);
				showMusic();
			});
			
		};
		
	}
	
	function nowViewWidth(){
		var w = 640 * viewHeight / 960;
		w = w > 640 ? w : 640;
		return w;
	}
	
	
	function beginEffect(){
		$('#text1').css('animation','1s infinite flash linear');
		$('#text1').on('webkitAnimationIteration animationIteration',function(ev){
			if(ev.originalEvent.elapsedTime == 3){
				$(this).remove();
				$('#text2').show().css('animation','1s infinite flash linear');
				$('#beginEffect').on('touchstart',function(){
					$(this).remove();
					$('#c1').trigger('touchstart');
				});
			}
		});
	}
	
	
	function slideImg(){
		var startY = 0;
		var nowIndex = 0;
		var nextorprevIndex = 0;
		var bBtn = true;
		var $span = $('#arrow').find('span');
		
		$li.on('touchstart',function(ev){
			if(bBtn){
				bBtn = false;
				var touch = ev.originalEvent.changedTouches[0];
				startY = touch.pageY;
				nowIndex = $(this).index();
				$li.on('touchend',function(ev){
					var touch = ev.originalEvent.changedTouches[0];
					if( touch.pageY < startY ){  //↑
					
						nextorprevIndex = nowIndex == $li.length-1 ? 0 : nowIndex + 1;
					
						$(this).css('transform','rotateX(90deg)');
						$(this).css('opacity',0);
						$(this).css('transition','1s');
						
						$li.eq(nextorprevIndex).css('transform','rotateX(-50deg)');
						$li.eq(nextorprevIndex).css('opacity',0).show();
						
						setTimeout(function(){
							$li.eq(nextorprevIndex).css('transform','rotateX(0deg)');
							$li.eq(nextorprevIndex).css('opacity',1);
							$li.eq(nextorprevIndex).css('transition','1s');
						},100);
						
					}
					else if( touch.pageY > startY ){ //↓
						
						nextorprevIndex = nowIndex == 0 ? $li.length-1 : nowIndex - 1;
					
						$(this).css('transform','rotateX(-50deg)');
						$(this).css('opacity',0);
						$(this).css('transition','1s');
						
						$li.eq(nextorprevIndex).css('transform','rotateX(90deg)');
						$li.eq(nextorprevIndex).css('opacity',0).show();
						
						setTimeout(function(){
							$li.eq(nextorprevIndex).css('transform','rotateX(0deg)');
							$li.eq(nextorprevIndex).css('opacity',1);
							$li.eq(nextorprevIndex).css('transition','1s');
						},100);
						
					}
					else{
						bBtn = true;
					}
					$li.off('touchend');
					$span.html( (nextorprevIndex+1) + '/' + $li.length );
				});
			}
		});
		
		$li.on('webkitTransitionEnd transitionEnd',function(ev){
			if( !$li.is(ev.target) ){
				return;
			}
			resetFn();
			
			if( cjAnimate.inAn ){
				cjAnimate.inAn(nextorprevIndex);
			}
			
			if( cjAnimate.outAn ){
				cjAnimate.outAn(nowIndex);
			}
			
		});
		
		function resetFn(){
			$li.css('transform','');
			$li.css('transition','');
			$li.eq(nextorprevIndex).siblings().hide();
			bBtn = true;
		}
		
	}
	
	var cjAnimate = {
		inAn : function(index){
			var $img = $li.eq(index).find('img');
			
			setTimeout(function(){
				$img.eq(0).css('transform','scale(1)');
				$img.eq(0).css('transition','1s');
				$img.eq(1).css('transform','translate(0,0)');
				$img.eq(1).css('opacity',1);
				$img.eq(1).css('transition','1s 0.5s');
				$img.eq(1).on('webkitTransitionEnd transitionEnd',function(){
					$img.eq(2).attr('class','active');
				});
			},100);
			
		},
		outAn : function(index){
			var $img = $li.eq(index).find('img');
			$img.eq(0).css('transform','scale(1)');
			$img.eq(1).css('transform','translate(0,200px)');
			$img.eq(1).css('opacity',0);
			$img.eq(0).css('transition','');
			$img.eq(1).css('transition','');
			$img.eq(2).attr('class','');
		}
	};
	
	$li.each(function(i,elem){
		cjAnimate.outAn(i);
	});
	
	function showMusic(){
		var $music = $('#music');
		var $a1 = $('#a1');
		var onoff = true;
		$music.on('touchstart',function(){
			
			if(onoff){
				$(this).attr('class','active');
				$a1.get(0).play();
			}
			else{
				$(this).attr('class','');
				$a1.get(0).pause();
			}
			onoff = !onoff;
		});
		$music.trigger('touchstart');
	}
	
	function showLoading(){
		var arr = ['img3.jpg','img4.jpg','img5.jpg','img6.jpg','img7.jpg','img8.jpg','img9.jpg','img10.jpg'];
		var iNow = 0;
		$.each(arr,function(i,imgSrc){
			
			var objImg = new Image();
			objImg.src = 'img/'+imgSrc;
			objImg.onload = function(){
				iNow++;
				if(iNow == arr.length){
					$('#loading').animate({opacity:0},function(){
						$(this).remove();
						beginEffect();
					});
				}
			};
			objImg.onerror = function(){
				$('#loading').animate({opacity:0},function(){
					$(this).remove();
					beginEffect();
				});
			};
			
		});
	}
	
});

</script>
</head>

<body>
<div id="main">
	<div id="loading">
    	<div class="content1">
        	<div class="arc1"></div>
            <div class="arc2"></div>
            <div class="arc3"></div>
            <div class="arc4"></div>
        </div>
        <div class="content2">
        	<div class="arc1"></div>
            <div class="arc2"></div>
            <div class="arc3"></div>
            <div class="arc4"></div>
        </div>
        <span>我的面试正在进行中....</span>
    </div>
	<div id="beginEffect">
    	<div id="sun"></div>
        <div id="text1"></div>
        <div id="text2"></div>
        <div class="lx">
        	<img src="img/lx.png">
            <img src="img/lx.png">
            <img src="img/lx.png">
            <img src="img/lx.png">
        </div>
    </div>
	<canvas id="c1" width="640" height="960"></canvas>
	<ul id="list">
    	<li>
        	<img src="img/img3.jpg">
            <img src="img/text3.jpg">
            <img src="img/title3.png">
        </li>
        <li>
        	<img src="img/img4.jpg">
            <img src="img/text4.jpg">
            <img src="img/title4.png">
        </li>
        <li>
        	<img src="img/img5.jpg">
            <img src="img/text5.jpg">
            <img src="img/title5.png">
        </li>
        <li>
        	<img src="img/img6.jpg">
            <img src="img/text6.jpg">
            <img src="img/title6.png">
        </li>
        <li>
        	<img src="img/img7.jpg">
            <img src="img/text7.jpg">
            <img src="img/title7.png">
        </li>
        <li>
        	<img src="img/img8.jpg">
            <img src="img/text8.jpg">
            <img src="img/title8.png">
        </li>
        <li>
        	<img src="img/img9.jpg">
            <img src="img/text9.jpg">
            <img src="img/title9.png">
        </li>
        <li>
        	<img src="img/img10.jpg">
            <img src="img/text10.jpg">
            <img src="img/title10.png">
        </li>
    </ul>
    <div id="arrow">
    	<div></div>
        <span>1/8</span>
    </div>
    <div id="music">
    	<audio id="a1" src="img/music.mp3" preload="auto" loop></audio>
    </div>
</div>
</body>
</html>
